<template>
  <dl class="activity-card" @click.prevent="goApply(item.activityId)">
    <dt><i :class="{ end: item.isExpired }" />{{ item.title }}</dt>
    <dd>
      <span>时间：</span>
      <div>
        {{ formatTime(item.startTime) }} - {{ formatTime(item.endTime) }}
      </div>
    </dd>
    <dd>
      <span>地点：</span>
      <div>{{ item.address }}</div>
    </dd>
    <div class="btn-group">
      <van-button
        v-if="item.isExpired"
        class="btn disabled"
        size="normal"
        type="default"
        disabled
      >已结束</van-button>
      <van-button
        v-else-if="item.isApply"
        class="btn view"
        size="large"
        type="default"
        @click.stop="goSearchResult(item.activityId)"
      >查看个人信息</van-button>
      <van-button
        v-else
        class="btn"
        size="normal"
        type="info"
        @click="goApply(item.activityId)"
      >报名</van-button>
    </div>
  </dl>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    goApply(activityId) {
      this.$router.push({ name: 'activityDetail', query: { activityId }})
    },
    goSearchResult(activityId) {
      this.$router.push({ name: 'searchResult', query: { activityId }})
    },
    formatTime(time) {
      return (time || '').slice(0, 10).replace(/-/g, '.')
    }
  }
}
</script>
<style scoped>
.activity-card {
  width: 91.47%;
  background: #fff;
  border-radius: 12px;
  margin: 12px auto;
  padding-bottom: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
}
dt {
  font-size: 17px;
  font-weight: 400;
  color: #000;
  line-height: 24px;
  padding: 20px 0 9px;
}
dt i {
  display: inline-block;
  width: 4px;
  height: 21px;
  background: #1990ff;
  border-radius: 0px 4px 4px 0px;
  vertical-align: text-top;
  margin-right: 12px;
}
dt i.end {
  background: #c6c6c6;
}
dd {
  display: flex;
  font-weight: 400;
  color: #000;
  line-height: 19px;
  margin: 7px 16px;
}
dd span {
  display: inline-block;
  color: #969799;
  line-height: 20px;
}
dd div {
  display: inline-block;
  width: 80%;
}
.btn-group {
  text-align: center;
}
.btn {
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  width: 104px;
  height: 32px;
  border-radius: 4px;
  margin-top: 13px;
  border-radius: 4px;
  font-weight: 600;
  background: #1990FF;
}
.btn.view {
  color: #1990ff;
  background: #f2f2f2;
}
.btn.disabled {
  width: 104px;
  height: 32px;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #c6c6c6;
  line-height: 24px;
  background: #f2f2f2;
  border-radius: 4px;
}
</style>
